<template>
  <div style=" position:relative;width:700px">
    <Table  width="100%" :columns="columns" :data="data" id="drawCoupon">
      <template slot-scope="{ row }" slot="activityGiftName">
        <Input v-model="row.activityGiftName"  style=" width:110px;" :maxlength="8" @on-keyup="filterSpace(row)" @on-blur="filterSpace(row)" @on-change="handleName(row)"></Input>
      </template>
      <template slot-scope="{ row }" slot="refName">
        <Input v-model="row.refName"  style=" width:110px;" readonly :disabled="row.giftType==3 || row.giftType==4">
          <Icon type="ios-search" slot="suffix"  @click="showDrawer(row)" v-show="row.giftType==-1" style="cursor:pointer;" />
        </Input>
      </template>
      <template slot-scope="{ row }" slot="pointAmount">
        <Input v-model="row.pointAmount" :maxlength="9" :disabled="row.giftType==-1 || row.giftType==4"  @on-keyup="filterNum(row,'pointAmount')" @on-blur="filterNum(row,'pointAmount')" @on-change="handleNum(row,'pointAmount')"></Input>
      </template>
      <template slot-scope="{ row }" slot="couponType">
        <Select v-model="row.giftType" placeholder="请选择" @on-change="handleType(row)">
          <!-- <Option :value="0">代金券</Option>
          <Option :value="1">折扣券</Option>
          <Option :value="2">赠币券</Option> -->
          <Option :value="-1">优惠券</Option>
          <Option :value="3">积分</Option>
          <Option :value="4">手动录入商品</Option>
        </Select>
      </template>
      <template slot-scope="{ row }" slot="hitRate">
        <Input v-model="row.hitRate" :maxlength="3" style=" width:40px;" @on-keyup="filterRate(row)" @on-blur="filterRate(row)" @on-change="handleRate(row)"></Input><span style="margin-left:10px;">%</span>
      </template>
      <template slot-scope="{ row }" slot="giftAmount">
        <Input v-model="row.giftAmount" :maxlength="9" style=" width:50px;" @on-keyup="filterNum(row,'giftAmount')" @on-blur="filterNum(row,'giftAmount')" @on-change="handleNum(row,'giftAmount')"></Input>
      </template>
    </Table>
    <Icon type="ios-add-circle" size="24" color="#2D8CF0" class="coupon-addicon" @click= "addGift" v-show="data.length < 5"  />
    <div>
    <Icon type="md-trash" size="24"  color="#808695" class="coupon-removeicon" @click="removeItem(index)" v-for="(item, index) in value.length" :key="index" :style="{'top': (2 + 48 * (index + 1)) + 'px'}" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import enumsMixin from '@/view/market/enums.js'
export default {
  name: 'SelectGift',
  mixins: [enumsMixin],
  data () {
    return {
      Dmodal: false,
      columns: [
        {
          title: '奖品名称',
          slot: 'activityGiftName'
        },
        {
          title: '券名称',
          slot: 'refName'
        },
        {
          title: '积分数量',
          slot: 'pointAmount',
          width: 110
        },
        {
          title: '奖品类型',
          slot: 'couponType',
          width: 120
        },
        {
          title: '中奖概率',
          slot: 'hitRate',
          width: 100
        },
        {
          title: '奖品数量',
          slot: 'giftAmount',
          width: 100
        }
      ],
      data: []
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  watch: {
    value (val) {
      this.data = JSON.parse(JSON.stringify(val))
    }
    // value: {
    //   handler (newVal) {
    //     this.$emit('input', newVal)
    //   },
    //   deep: true
    // }
  },
  mounted () {
  },
  methods: {
    addGift () {
      this.$emit('addgift')
    },
    handleType (row) {
      if (row.giftType !== 3) {
        this.data[row._index].pointAmount = ''
      }
      if (row.giftType === 3 || row.giftType === 4) {
        this.data[row._index].refName = ''
        this.data[row._index].refType = row.giftType
      }
      this.data[row._index].giftType = row.giftType
      this.$emit('input', this.data)
    },
    handleName (row) {
      this.data[row._index].activityGiftName = row.activityGiftName
      this.$emit('input', this.data)
    },
    handleRate (row) {
      this.data[row._index].hitRate = row.hitRate
      this.$emit('input', this.data)
    },
    handleNum (row, param) {
      this.data[row._index][param] = row[param]
      this.$emit('input', this.data)
    },
    filterSpace (row) {
      this.data[row._index].activityGiftName = row.activityGiftName.replace(/[^0-9A-Za-z\u4e00-\u9fa5]/g, '')
      this.$emit('input', this.data)
    },
    filterRate (row) {
      let val = row.hitRate
      val = val.replace(/[^0-9]/g, '')
      if (val.length >= 1 && val.substring(0, 1) === '0') {
        val = ''
      }
      if (val.length === 3 && val > 100) {
        val = val.substring(0, 2)
      }
      this.data[row._index].hitRate = val
      this.$emit('input', this.data)
    },
    filterNum (row, param) {
      let val = row[param]
      val = val.replace(/\D/g, '')
      if (val.substring(0, 1) === '0') {
        val = ''
      }
      this.data[row._index][param] = val
      this.$emit('input', this.data)
    },
    showDrawer (row) {
      this.$emit('addcoupon', row._index)
    },
    removeItem (index) {
      let newVal = this.value.filter((item, i) => i !== index)
      this.$emit('input', newVal)
    }
  }
}
</script>
<style>
#drawCoupon .ivu-table-cell {line-height: 1.5;}
</style>
<style lang='less' scoped>
  .coupon-addicon{ position:absolute;  right:-70px; top:50px; cursor: pointer; }
  .coupon-removeicon{ position:absolute; right:-40px; cursor: pointer;}
</style>
